<template>
  <view class="password-modify">
    <view class="input-item">
      <text class="label">新密码：</text>
      <input type="text" placeholder="请输入新密码" v-model="newPassword" />
    </view>
    <view class="input-item">
      <text class="label">确认新密码：</text>
      <input type="text" placeholder="请再次输入新密码" v-model="confirmPassword" />
    </view>
    <button @click="modifyPassword" class="submit-button">修改密码</button>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { modifyPasswordAPI } from "@/api/user"; // 引入 API 调用函数

const newPassword = ref("");
const confirmPassword = ref("");

// 密码强度校验正则表达式
const passwordRegex = /^(?=.*[A-Za-z])(?=.*\d)(?=.*[^A-Za-z\d]).{8,16}$/;

const modifyPassword = async () => {
  // 检查新密码和确认密码是否一致
  if (newPassword.value !== confirmPassword.value) {
    uni.showToast({
      title: "新密码和确认密码不一致",
      icon: "none",
    });
    return;
  }

  // 检查密码强度
  if (!passwordRegex.test(newPassword.value)) {
    uni.showToast({
      title: "密码必须8-16位，且包含字母、数字和特殊字符",
      icon: "none",
    });
    return;
  }

  try {
    const response = await modifyPasswordAPI({ password: newPassword.value });
    if (response.success) {
      uni.showToast({
        title: "密码修改成功",
      });
    } else {
      uni.showToast({
        title: "密码修改失败：" + response.message,
        icon: "none",
      });
    }
  } catch (error) {
    console.error("修改密码失败:", error);
    uni.showToast({
      title: "修改密码异常",
      icon: "none",
    });
  }
};
</script>


<style scoped>
.password-modify {
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

.input-item {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
}

.label {
  width: 80px;
  font-size: 14px; /* 标签 */
  color: #333;
  margin-right: 10px;
}

input {
  flex: 1;
  border: 1px solid #ccc;
  padding: 10px;
  border-radius: 4px;
  font-size: 14px; /* 输入框字体大小调整为14px */
  transition: border-color 0.3s ease;
}

input:focus {
  border-color: #007aff;
}

.submit-button {
  background-color: #007aff;
  color: white;
  padding: 5px 0px; /* 按钮padding保持不变 */
  border-radius: 4px;
  font-size: 16px; /* 按钮字体大小保持不变 */
  transition: background-color 0.3s ease;
  border: none;
  outline: none;
  cursor: pointer;
}

.submit-button:hover {
  background-color: #0056b3;
}
</style>